{% extends '_layouts/base.html' %}
{% load i18n static thumbnail %}

{% block metatags %}
  <link rel="canonical" href="{{ pet_url }}"/>
  <meta name="description" content="{{ pet.description }}">

  <meta property="og:title" content="{{ pet.name }} | Cadê meu Bicho?">
  <meta property="og:description" content="{{ pet.description }}">
  <meta property="og:url" content="{{ pet_url }}">
  <meta property="og:image"
        content="http://www.cademeubicho.com{{ pet.profile_picture|thumbnail_url:'pet_thumb' }}">
  <meta property="og:site_name" content="Cadê meu Bicho?">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ pet.name }} | Cadê meu Bicho?">
  <meta name="twitter:description" content="{{ pet.description }}">
  <meta name="twitter:image:src"
        content="http://www.cademeubicho.com{{ pet.profile_picture|thumbnail_url:'pet_thumb' }}">
{% endblock %}

{% block title %}{{ pet.name }} - {{ pet.status.description }}{% endblock %}
{% block page_title %}{{ pet.status.description }}: {{ pet.name|title }}, {{ pet.city|title }}{% endblock %}

{% block content %}
  <div class="modal fade" id="delete_pet" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">{% trans 'Delete Pet' %}</h4>
        </div>

        <div class="modal-body">
          <p>{% trans 'Do you really want to erase this pet?' %}</p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Cancel' %}</button>

          <form action="{% url 'meupet:delete_pet' pet.slug %}" method="post" class="form-inline">
            {% csrf_token %}
            <input type="submit" class="btn btn-danger" value="{% trans 'Delete' %}"/>
          </form>
        </div>

      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-5">
      <a href="{{ pet.profile_picture.url }}" data-lightbox="{{ pet.slug }}" data-title="{{ pet }}">
        <img class="img-thumbnail" src="{{ pet.profile_picture|thumbnail_url:'pet_thumb' }}"
             alt="{{ pet }}"/>
      </a>
      {% if user == pet.owner %}
        <form class="form-horizontal" method="POST" enctype="multipart/form-data"
              action="{% url 'meupet:upload_image' pet.slug %}">
          {% csrf_token %}
          <input name="pet_id" value="{{ pet.id }}" type="hidden">

          <div class="form-group">
            <label for="another_picture" class="control-label">{% trans 'Add Photo' %}</label>
            <input type="file" id="another_picture" name="another_picture">
            <span class="help-block">{% trans 'Maximum image size is 8MB' %}</span>
          </div>
          <div class="form-group">
            <input type="submit" name="submit" class="btn btn-primary pull-right" value="{% trans 'Submit Image' %}">
          </div>
        </form>
      {% endif %}
    </div>

    <div class="col-md-7">
      <div class="panel panel-default">
        <div class="panel-body">
          <p>
            <strong>{% trans 'Description' %}:</strong><br/>
            {{ pet.description }}
          </p>

          <p>
            <strong>{% trans 'City' %}:</strong><br/>
            {{ pet.city|title }}
          </p>

          {% if pet.size %}
            <p>
              <strong>{% trans 'Size' %}:</strong><br/>
              {{ pet.get_size_display }}
            </p>
          {% endif %}

          {% if pet.sex %}
            <p>
              <strong>{% trans 'Sex' %}:</strong><br/>
              {{ pet.get_sex_display }}
            </p>
          {% endif %}

          <p>
            <strong>{% trans 'Contact' %}:</strong><br/>
            <a href="{% url 'users:user_profile' pet.owner.id %}">{{ pet.owner.get_full_name }}</a>
            {% if pet.owner.facebook %} | <a href="{{ pet.owner.facebook }}">Facebook</a>{% endif %}
          </p>

          <p>
            <strong>{% trans 'Share' %}:</strong><br/>
            <a href="http://www.facebook.com/sharer.php?u={{ pet_url }}" target="_blank" rel="noreferrer noopener">
              <img src="{% static 'img/facebook.png' %}" alt="Facebook"/>
            </a>
            <a href="http://twitter.com/share?url={{ pet_url }}" target="_blank" rel="noreferrer noopener">
              <img src="{% static 'img/twitter.png' %}" alt="Twitter"/>
            </a>
          </p>
          {% if user == pet.owner %}
            <div class="pull-right">
              {% if not pet.status.final %}
                <form action="{% url 'meupet:change_status' pet.slug %}" method="post" class="form-inline">
                  {% csrf_token %}
                  <input type="submit" class="btn btn-success" value="{% trans 'Mark as solved!' %}"/>
                </form>
              {% endif %}

              <a href="{% url 'meupet:edit' pet.slug %}" class="btn btn-primary">{% trans 'Edit' %}</a>

              <a href="{% url 'meupet:poster' pet.slug %}" class="btn btn-primary">{% trans 'Generate Poster' %}</a>

              <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete_pet">
                {% trans 'Delete Pet' %}
              </button>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    {% if pet.photo_set.all %}
      <div class="col-md-12">
        <h3>{% trans 'More photos' %}</h3>

        <div class="row">
          {% for photo in pet.photo_set.all %}
            <div class="col-md-3">
              <a href="{{ photo.image.url }}" data-lightbox="{{ pet.slug }}" data-title="{{ pet }}">
                <img class="img-thumbnail" src="{{ photo.image|thumbnail_url:'pet_thumb' }}"
                     alt="{{ pet }}"/>
              </a>
            </div>
            {% if forloop.counter|divisibleby:4 %}
              </div>
              <div class="row">
            {% endif %}
          {% endfor %}
          </div>
      </div>
    {% endif %}
  </div>
{% endblock %}
